<template>
  <a-modal v-model:visible="visible"
           centered
           :closable="false"
           :keyboard="false"
           :maskClosable="false"
           :title="$t('core.model.division.addTitle')">
    <template #footer>
      <a-button key="back" @click="visible = false">
        {{ $t('core.model.division.cancel') }}
      </a-button>
      <a-button key="submit" type="primary" @click="addSubmit">
        {{ $t('core.model.division.add') }}
      </a-button>
    </template>
    <a-form
        ref="form"
        :model="formState"
        layout="vertical" :wrapper-col="{span: 24}">
      <a-row>
        <a-col :span="24">
          <a-form-item
              label="行政区划名称："
              name="name"
              :rules="[{ required: true, message: '请输入行政区划名称' }]"
          >
            <a-input v-model:value="formState.name"/>
          </a-form-item>
        </a-col>

      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item
              label="行政区划缩写："
              name="shortName"
          >
            <a-input v-model:value="formState.shortName" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item
              label="行政区划编码："
              name="code"
              :rules="[{ required: true, message: '请输入行政区划编码' }]">
            <a-input v-model:value="formState.code" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item
              label="父级行政区划："
              name="parentId"
          >
            <a-input
                :placeholder="this.currentDivison ? this.currentDivison.title : $t('core.model.routeTitle.division')" disabled/>
          </a-form-item>
        </a-col>
      </a-row>
<!--      <a-row>-->
<!--        <a-col :span="24">-->
<!--          <a-form-item-->
<!--              label="序号："-->
<!--              name="sort"-->
<!--          >-->
<!--            <a-input-number-->
<!--                v-model:value="formState.sort"-->
<!--                style="width: 100%"-->
<!--                :min="0" :max="999999">-->
<!--            </a-input-number>-->
<!--          </a-form-item>-->
<!--        </a-col>-->
<!--      </a-row>-->
      <a-row type="flex" justify="space-between" align="middle">
        <a-col :span="11">
          <a-form-item
              label="经度："
              name="longitude"
          >
            <a-input-number
                v-model:value="formState.longitude"
                :min="0" :max="180"
                :precision="4">
              <template #addonBefore>
                <a-select v-model:value="formState.longitudeUnit" style="width: 80px">
                  <a-select-option value="°E">东经</a-select-option>
                  <a-select-option value="°W">西经</a-select-option>
                </a-select>
              </template>
              <template #addonAfter>
                <span>{{formState.longitudeUnit}}</span>
              </template>
            </a-input-number>
          </a-form-item>
        </a-col>
        <a-col :span="11">
          <a-form-item
              label="纬度："
              name="latitude"
          >
            <a-input-number
                v-model:value="formState.latitude"
                :min="0"
                :max="90"
                :precision="4">
              <template #addonBefore>
                <a-select v-model:value="formState.latitudeUnit" style="width: 80px">
                  <a-select-option value="°N">北纬</a-select-option>
                  <a-select-option value="°S">南纬</a-select-option>
                </a-select>
              </template>
              <template #addonAfter>
                <span>{{formState.latitudeUnit}}</span>
              </template>
            </a-input-number>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script>
  import { defineComponent, reactive, ref, watch, getCurrentInstance, toRaw } from 'vue';
  import { divisonApi } from '@/api/core/division';
  import { message } from 'ant-design-vue';
  export default {
    name: 'AddModel',
    data () {
      return {
        visible: false
      }
    },
    setup (props, context) {
      const vue = getCurrentInstance();
      const form = ref()
      const formState = reactive({
        name: '',
        shortName: '',
        code: '',
        parentId: 0,
        sort: 0,
        longitude: 0,
        latitude: 0,
        longitudeUnit: '°E',
        latitudeUnit: '°N'
      })
      // 当前父级行政区划
      const currentDivison = ref();
      // 打开弹框
      const open = (division) => {
        currentDivison.value = division
        console.log(currentDivison, 'cuurentDivision')
        vue.data.visible = true
        formState.name = ''
        formState.shortName = ''
        formState.code = ''
        formState.level = division ? division.level + 1 : 1
        formState.sort = 999999999
        formState.longitude = 0
        formState.latitude = 0
        formState.parentId = division ? division.key : 0
        formState.longitudeUnit = '°E'
        formState.latitudeUnit =  '°N'

        console.log(formState, '新建打开')
      }

      // 新增提交
      const addSubmit = () => {
        form.value.validateFields().then(() => {
          divisonApi.add(toRaw(formState)).then((res) => {
            if (res.code === 1000) {
              message.success('新增行政区划成功')
              vue.data.visible = false
              // 刷新页面
              context.emit('addSubmit', {
                level: formState.level,
                title: formState.name,
                key: res.data.iid,
                isLeaf: true
              })
            } else {
              message.warn(res.msg)
            }
          })
        }).catch((e) => {})
      }

      return {
        form,
        formState,
        currentDivison,
        open,
        addSubmit
      }
    }
  }
</script>

<style scoped>

</style>
